<template>
    <ayjDrawer class="sales-box" :title="sale_2title" width="40%" ref="ayjDrawerRefTow" :slotFooter="false"
        @closeFun="handleClose">
        <div ref="containerBoxRef" class="container_box bg_linear">
            <div ref="pointsBoxRef" class="mb5">
                <div class="flex_between">
                    <div class="flex1">
                        <SaleCount :count_all="count_day_all" :rowCol="18" :size="'small'" />
                    </div>
                    <div class="ml10" style="width: 50%;">
                        <areaBline :visibleData="count_day_ls" />
                    </div>
                </div>
                <!-- 月报 导出 -->
                <div class="mt10" v-if="count_day_ls && count_day_ls.length > 0 && (reqShopCount.group == 2 || is_quarter == 3)">
                    <el-button type="primary" size="mini" icon="el-icon-download" @click="exportReport"
                        style="font-size: 12px;padding:5px">导出{{ sale_2title }}报表</el-button>
                </div>
            </div>
            <div class="flex_column flex1">
                <div class="table_box mt5">
                    <ayjTable :columns="columnsTa" :data="count_day_ls" :hasMore="hasMore" :loading="loading"
                        :height="dynamicHeight" @load-more="loadMoreData">
                        <template v-if="reqShopCount.group == 2 || reqShopCount.group == 3" #column-time="{ row }">
                            <span class="font_bule under-line" @click="handleDayClick(row)"> {{ row.time || '--' }}
                            </span>
                        </template>
                        <template v-else #column-timestr="{ row }">
                            <span class="font_bule under-line" @click="handleDayClick(row)"> {{ row.timestr || '--' }}
                            </span>
                        </template>
                        <template #column-profit_re="{ row }">
                            <span class="font_green"> {{ row.profit_re || 0 }} </span>
                        </template>
                    </ayjTable>
                </div>
            </div>
        </div>
        <!-- 日销售情况 -->
        <ShopSellLsDrawer ref="shopSellLsDrawerRef" />
    </ayjDrawer>
</template>
shop_sell_ls
<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance, defineProps, defineExpose, watch } from '@vue/composition-api'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import { useSaleState } from '@/components/report/hooks/useSaleState'

import SaleCount from '@/components/report/saleV3/SaleCount.vue'
import areaBline from '@/components/report/saleV3/areaBline.vue'
import ShopSellLsDrawer from '@/components/report/saleV3/ShopSellLsDrawer.vue'

const { proxy } = getCurrentInstance();
import config from "@/js/conf/Config.js";
import localStore from "@/js/LocalStore.js";
const maxPnum = 20

const containerBoxRef = ref(null)
const pointsBoxRef = ref(null)
const loading = ref(false)
const hasMore = ref(true)

// 使用销售状态
const {
    count_day_ls,
    count_day_all,
    sale_2title,
    reqShopCount,
    itemDayClick,
    handleShopSellLsClick,
    is_quarter,
    exportReport,
} = useSaleState()

// 使用动态高度 hooks
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: containerBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 20 // 额外的间距
})

const columnsTa = computed(() => [
    {
        title: '序号',
        prop: 'index',
        width: '50px',
        align: 'center',
        render: (row, column, index) => index + 1,
    },
    { title: '日期', prop: (reqShopCount.value.group == 2 || reqShopCount.value.group == 3) ? 'time' : 'timestr', slot: true },
    { title: '销售额', prop: 'amount_re', align: 'center' },
    { title: '毛利', prop: 'profit_re', align: 'center', slot: true },
    { title: '单数', prop: 'num_od_re', align: 'center' },
    { title: '数量', prop: 'number_re', align: 'center' },
])

// 监听 reqShopCount 变化时更新日期列的 prop
watch(() => reqShopCount.value.group, (newVal) => {
    columnsTa.value[1].prop = newVal == 2 || newVal == 3 ? 'time' : 'timestr'
}, { immediate: true })

// 添加调试信息
// watch(count_day_ls, (newVal) => {
// }, { deep: true });

const props = defineProps({
    getYyInfoData: {
        type: Object,
        default: () => ({})
    }
})

const customerPointsRef = ref(null)


const shopSellLsDrawerRef = ref(null)
const handleDayClick = (item) => {
    itemDayClick(item)
    shopSellLsDrawerRef.value.open()
    handleShopSellLsClick(item)
}


const ayjDrawerRefTow = ref(null)
const open = async () => {
    ayjDrawerRefTow.value.open();
    setTimeout(() => {
        updateHeight()
    }, 100)
}

const handleClose = () => {
    count_day_all.value = {}
    count_day_ls.value = []
    ayjDrawerRefTow.value.close();
}

onMounted(() => { })

defineExpose({
    open
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.customer_points_top {
    padding: 10px;
    border-radius: 6px;
}

.select_store ::v-deep .el-input__inner {
    background-color: #f5f5f5 !important;
    border: none !important;
    color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.customer_points_top ::v-deep .el-divider--vertical {
    height: 1.5rem !important;
    position: relative;
    left: -10px;
}

.container_box {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table_box {
    flex: 1;

    ::v-deep .body-cell {
        white-space: normal !important;
        line-height: 1.5;
        height: auto;
        min-height: 32px;
        display: flex;
        align-items: center;
    }

    ::v-deep .header-cell {
        white-space: normal !important;
        line-height: 1.5;
        height: auto;
        min-height: 40px;
        display: flex;
        align-items: center;
    }
}

.sales-box {
    ::v-deep .el-drawer {
        width: 40% !important;
    }
}
</style>
